<template>
  <div style="padding: 0;margin: 0 20px;">
    <div style="height:44px;border-bottom: 1px solid #e9e9eb;padding: 0;line-height: 44px">
      <el-button type="danger" size="small" plain>辟谣</el-button>
      <span style="padding-left: 10px">辟谣专区</span>
    </div>
    <div class="setup" style="width: 100%;padding: 16px 0" v-for="a in 10">
      <el-row :gutter="10">
        <el-col :span="1">
          <div style="height: 105px">
            <span style="font-weight: bold;font-size: 20px;color: orange">{{a}}</span>
          </div>
        </el-col>
        <el-col :span="16">
          <div style="height: 100%">
            <div style="height: 55px;width: 100%;font-size: 18px;font-weight: 600">
              {{data.title}}
            </div>
            <div style="height: 22px;width: 100%;color: #454545;font-size: 14px;line-height: 22px">
              {{data.summary}}
            </div>
            <div style="height: 25px;width: 100%;
            /*border: 1px solid black;*/
            font-size: 18px;
            line-height: 40px;">
              <el-row>
               <el-col :span="6">
                 <a href="javascript:void(0)" class="like"><el-icon><Pointer /></el-icon><span>点赞 {{data.like}}</span></a>
               </el-col>
               <el-col :span="6">
                 <a href="javascript:void(0)" class="like"><el-icon><Star /></el-icon><span>收藏 {{data.collect}}</span></a>
               </el-col>
               <el-col :span="6">
                 <a href="javascript:void(0)" class="like"><el-icon><ChatDotSquare /></el-icon><span>评论 {{data.comment}}</span></a>
               </el-col>
               <el-col :span="6">
                 <a href="javascript:void(0)" class="like"><el-icon><View /></el-icon><span>浏览 {{data.browse}}</span></a>
               </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div style="height: 105px;
          background-size: cover;">
            <img :src="data.imgUrl" alt="" height="105" width="174" style="padding: 0">
          </div>
        </el-col>
      </el-row>
      <router-view/>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";

const data=ref({
        title:"特斯拉 FSD V12 完全采用神经网络，代码从 30 多万行减到 2000 行，对智驾行业有何影响？",
        summary:"当其他车企还在依赖激光雷达等类型的传感器...",
        imgUrl:"https://pica.zhimg.com/v2-9cdabd09bf202c1395b7f1c7bb5d6ac3_400x224.jpg?source=57bbeac9",
        like:5,
        collect:15,
        comment:25,
        browse:35});
</script>

<style scoped>
.setup{
  height: 105px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;
}
.setup:hover{
  cursor: pointer;
}
p{
  padding: 0;
  margin: 0;
}
.like{
  color: #8493a5;
  text-decoration: none;
  padding-bottom: 0px;
}
.like span{
  font-size: 16px;
  padding-top: 0px;
}
.like:hover{
  color: #1989fa;
}
</style>